<template>
  <view class="page-container login-container">
    <view class="login-box">
      <img src="../static/logo.png" alt="" class="logo" />
      <u-button
        openType="getPhoneNumber"
        @getphonenumber="getPhoneNumberHandler"
        type="primary"
        @click.capture="loginHandler"
        >微信授权登录</u-button
      >
      <!-- <u-button
        openType="getPhoneNumber"
        @getphonenumber="getPhoneNumberHandler"
        type="primary"
        @click.capture="loginHandler"
        >微信授权登录</u-button
      > -->
      <view class="copyright">
        <u-checkbox-group @change="checkboxHandler" for="agree">
          <u-checkbox name="agree" :checked="isAgree" shape="circle">
          </u-checkbox>
        </u-checkbox-group>
        <view class="t" @click="isAgree = !isAgree"
          ><text class="t1">为了保障您的个人隐私，请先阅读</text
          ><text class="t2" @tap.stop="gotoAgreement">《用户协议》</text
          ><text class="t1">登录表示您已同意</text></view
        >
      </view>
    </view>
  </view>
</template>

<script>
import apis from '../apis/apis'
import ENV from '../config/env'
export default {
  data() {
    return {
      isAgree: false,
      isShowPopup: true,
      openId: 'ofZLi5YmjMsVNZxzv1YPY2u1TQjY',
      info: {}
    }
  },
  async mounted() {
    let code = await this.getWxCode()
    console.log('code:', code)

    await this.serviceLogin(code)
  },
  methods: {
    async getWxCode() {
      let code = await uni.login()
      if (code[1]?.code) {
        return code[1].code
      }
    },
    async serviceLogin(jsCode) {
      let res = await this.$http.post(apis.getOpenId, { jsCode })
      console.log('res:', res)
      this.openId = res.openid
      this.info = res.userInfo
      // this.token = res.token
      this.$store.commit('setToken', res.token)
      // if (res.userStatus == ENV.USER_STATUS_INFO.INIT_NONE) {
      //   // 尚未注册，等待用户授权处理
      //   return
      // }
    },
    checkboxHandler(e) {
      console.log('checkboxHandler.e:', e)
      this.isAgree = e[0] == 'agree'
    },
    gotoAgreement() {
      uni.navigateTo({
        url: '/pages/my/agreement'
      })
    },
    loginHandler(e) {
      console.log('loginHandler.e:', e)
    },
    getUserInfoHandler(e) {
      console.log('getUserInfoHandler.e:', e)
      if (!this.isAgree) {
        uni.showToast({
          title: '请先阅读并同意用户协议',
          icon: 'none',
          duration: 2000,
          mask: true
        })
        return
      }
      this.getUserInfo(e)
    },
    getUserInfo(e) {
      console.log('getUserInfo.e:', e)
      const userInfo = e.detail
      this.$http
        .post(apis.getUserInfo, {
          encryptedData: userInfo.encryptedData,
          iv: userInfo.iv,
          rawData: userInfo.rawData,
          signature: userInfo.signature,
          openid: this.openId
        })
        .then((res) => {
          console.log('getUserInfo.res:', res)
          this.$store.commit('setUserInfo', res)
          if (this.info && this.info.nickname) {
            uni.switchTab({
              url: '/pages/my/index'
            })
          } else {
            uni.navigateTo({
              url: '/pages/my/profile'
            })
          }
        })
    },
    getPhoneNumberHandler(e) {
      console.log('getPhoneNumberHandler.e:', e)
      if (!this.isAgree) {
        uni.showToast({
          title: '请先阅读并同意用户协议',
          icon: 'none',
          duration: 2000,
          mask: true
        })
        return
      }
      this.getPhone(e)
    },
    getPhone(e) {
      this.$http
        .post(apis.getPhoneNumber, {
          ...e.detail,
          openId: this.openId
        })
        .then((res) => {
          console.log('getPhone.res:', res)
          if (res && res.phoneNumber) {
            this.info.phone = res.phoneNumber
            this.$store.commit('setUserInfo', this.info)
            if (this.info && this.info.nickname) {
              uni.switchTab({
                url: '/pages/my/index'
              })
            } else {
              uni.navigateTo({
                url: '/pages/my/profile'
              })
            }
          }
        })
    }
  }
}
</script>

<style lang="scss">
.login-container {
  .login-box {
    width: 100%;
    height: calc(100vh - env(safe-area-inset-bottom));
    padding: 150rpx 30rpx 100rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    width: 200rpx;
    height: 200rpx;
    border-radius: 40rpx;
  }
  .copyright {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .t {
      width: 550rpx;
    }
    .t1 {
      font-size: 24rpx;
      color: #333;
    }
    .t2 {
      font-size: 24rpx;
      color: #8dc72f;
    }
  }
  .agree-box {
    width: 650rpx;
    height: 300rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .content {
      padding: 50rpx;
      font-size: 24rpx;
      color: #333;
      text-align: center;
    }
    .btn-box {
      width: 100%;
      padding: 0 42rpx;
      margin-top: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      .btn {
        width: 220rpx;
      }
    }
  }
}
</style>
